<template>
    <div class="point-market">
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="color: #000000;font-weight: bold;" class="s-20">积分商城</div>
            <div @click="goback"  class="back">
                <img  src="../../../assets/img/person/back.png" alt="">
                <span class="s-15 pointer">返回</span>
            </div>
        </div>
        <!-- <el-alert title="你当前处于离线状态无法使用积分商城" type="error" effect="dark" center></el-alert> -->
        <h6 class="item-title s-18">我的积分<span class="content-tips">（积分每年清零一次，请及时兑换）</span></h6>
        <div class="user-message flex-between">
            <div class="message-content align-center">
                <div class="content-detail ">
                    {{userPoint.mobile}}
                </div>
                <span class="content-tips">账户</span>
            </div>
            <span class="divider"></span>
            <div class="message-content align-center">
                <div class="content-detail ">
                    {{isNaN(userPoint.totalPoints - userPoint.exchangedPoints)?'--':(userPoint.totalPoints - userPoint.exchangedPoints)}}
                </div>
                <span class="content-tips ">可用积分</span>
            </div>
            <span class="divider"></span>
            <div class="message-content align-center">
                <div class="content-detail ">
                    {{userPoint.exchangedPoints}}
                </div>
                <span class="content-tips">已兑换积分</span>
            </div>
        </div>
        <h6 class="item-title s-18">积分获取方式</h6>
        <div class="get-point">
            <div class="get-method align-start" v-for="(item,index) in getPointMethod" :key="item.name+'_'+index">
                <div class="method-icon flex-center">
                    <el-tooltip effect="light" :content="item.tips" :disabled="!item.tips" placement="top">
                        <img :src="item.icon" alt="">
                    </el-tooltip>
                </div>
                <div class="method-name s-16">
                    {{item.name}}
                </div>
                <!-- <div class="method-tips" v-if="item.tips">
                    {{item.tips}}
                </div> -->
            </div>
        </div>
        <nav class="point-tabs">
            <span :class="['tabs-item',{'active':tabs==='explain'}]" @click="tabs='explain'">
                积分兑换
            </span>
            <span :class="['tabs-item',{'active':tabs==='list'}]" @click="tabs='list'">
                兑换记录
            </span>
        </nav>
        <div class="goods-list" v-if="tabs==='explain'">
            <div class="goods-item" v-for="item in goodsList" :key="item.id">
                <img :class="['goods-temp',{'pointer':item.isRealObject === 0}]" :src="item.thumb" alt="" @click="showGoodsDetailHandle(item)">
                <div class="goods-des">
                    <p class="goods-name">{{item.name}}</p>
                    <div class="goods-cost">
                        <p class="newx-cost">{{getDiscountPrice(item.totalPrice,item.discount)}}积分</p>
                        <p :class="[item.discount===1? 'original-cost' : 'old-cost']">{{item.totalPrice}}积分</p>
                    </div>
                    <div class="goods-handle flex-between">
                        <p class="goods-num">数量：{{item.exchangeNumber}}个</p>
                        
                    </div>
                </div>
                <div>
                    <button class="explain-handle" @click="exchangeGoodsHandle(item)">兑换</button>
                </div>
            </div>
            <div class="goods-item flex-between">
                <div class="flex-center"> 
                    <img :class="['goods-temp','pointer']" src="../../../assets/img/person/lookMore.png" alt="" @click="lookMoreGoods">
                    <div style="color: #ff9e63;" class="pointer" @click="lookMoreGoods">点击查看更多礼品</div>
                </div>
                <div class="goods-des flex-center">
                </div>
            </div>
        </div>
        <div class="explain-his" v-else>
            <el-table :data="exchangeHis" style="width: 100%;margin-bottom: 10px;" :header-cell-style="setHeaderStyle" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}">
                <el-table-column prop="appId" label="兑换平台" width="120px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div>{{scope.row.appId === '1' ? "教学平台" : "开放平台"}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="gmtCreate" label="兑换时间" width="240px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{formateDate(scope.row.gmtCreate)}}
                    </template>
                </el-table-column>
                <el-table-column prop="goodsName" label="物品名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="pointCost" label="花费积分" width="150px" align="center" >
                    <!-- <template>1</template> -->
                </el-table-column>
                <el-table-column label="状态" width="100px">
                    <template>已完成</template>
                </el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.deliveryDesc" @click="showDetailHandle(scope.row.deliveryDesc , scope.row.isRealObject,scope.row.goodsName)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :hide-on-single-page="true" :page-size="pageSize" :total="total" @current-change='currentChange'></el-pagination>
        </div>
        <div class="dialog-container flex-center" v-if="showDetail">
            <div class="goods-detail">
                <div class="header-title flex-center">
                    兑换详情
                    <span class="close-dialog" @click="showDetail=false">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
                <div class="dialog-conetent">
                    <div v-if="detaildMessage[0].bookName">
                        <div>
                            <span  style="font-weight:500">兑换物品：</span>
                            <span>{{detaildMessage[0].name}}</span>
                        </div>
                        <div style="margin-top:30px">
                            <span  style="font-weight:500">到期时间：</span>
                            <span>{{detaildMessage[0].expireDate}}</span>
                        </div>
                    </div>
                    <div v-if="detaildMessage[0].key" style="margin-left:50px">
                        <div class="flex-start">
                            <span class="t-color-c" style="font-weight:500;width: 100px;text-align:right;">兑换物品：</span>
                            <span>{{detaildMessage[0].name}}</span>
                        </div>
                        
                        <div style="margin-top:15px" class="flex-start" v-for="(item,index) in detaildMessage" :key="index+'_detail'">
                            <span style="font-weight:500;width: 100px;text-align:right;" class="t-color-c">{{item.key}}：</span>
                            <span>{{item.value}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dialog-container flex-center" v-if="exchangeGoods">
            <div class="goods-detail">
                <div class="header-title flex-center">
                    兑换
                    <span class="close-dialog" @click="exchangeGoods=false">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
                <div class="dialog-conetent">
                    <el-form v-if="goodsType===1" :model="userMessage" status-icon :rules="rules" ref="userMessage" label-width="100px" class="demo-userMessage">
                        <el-form-item label="收件人" prop="name">
                            <el-input style="width:300px" v-model="userMessage.name" autocomplete="off" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input style="width:300px" v-model.number="userMessage.mobile" autocomplete="off" placeholder="请输入正确的手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input style="width:300px" type="textarea" v-model.number="userMessage.address" placeholder="请输入详细地址" :rows="5"></el-input>
                            <div class="s-12 t-color-c" style="width:300px;line-height: 20px;">
                                目前仅配送中国大陆地区（不包含港澳台地区），暂不支持其他国家和地区配送。登记中国大陆以外地区将无法发货，敬请谅解。
                            </div>
                        </el-form-item>
                        <el-form-item label="邮编" prop="postalCode">
                            <el-input style="width:300px" v-model.number="userMessage.postalCode" placeholder="请输入邮编"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">确定</el-button>
                            <el-button @click="resetForm">取消</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="exchange-box" v-if="goodsType===0">
                        <div style="margin-bottom:40px">
                            <span>您本次兑换将花费</span>
                            {{getDiscountPrice(currentexchangeGoods.totalPrice,currentexchangeGoods.discount)}}
                            <span>积分</span>
                        </div>
                        <div style="">
                            <el-button type="primary" @click="exchangeCode">确定</el-button>
                            <el-button @click="cancelExchange">取消</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showExchangeAgreement" class="dialog-container flex-center">
            <div class="agreement-container">
                <div class="ag-close">
                    <i class="el-icon-close pointer" @click="showExchangeAgreement = false"></i>
                </div>
                <p class="ag-content">请您认真阅读<a class="hyperlink" href="#" @click="showAgreement">美丽科学教学平台积分协议条款</a>，如您确认兑换，将被视为对本协议条款的接受。</p>
                <div class="flex-end">
                    <el-checkbox  v-model="isReadExchangeAgreement">不再提醒</el-checkbox>
                </div>
                <div class="handel flex-end">
                    <button @click="confirm" class="dis-button s-14">确认</button>
                    <button @click="showExchangeAgreement = false" class="dis-button s-14">取消</button>
                </div>
            </div>
        </div>
        <div v-if="showforbidExchange" class="agreement-mask flex-center">
            <div class="goods-detail">
                <div class="header-title flex-center">
                    兑换
                    <span class="close-dialog" @click="showforbidExchange=false">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
                <div class="dialog-conetent">
                    <div style="text-align:center">
                        <div style="margin-top:30px">您当前已是SVIP用户，无法继续兑换VIP权限</div>
                        <button style="margin-top:30px" @click="showforbidExchange = false" class="forbid-button s-14">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { SqlLibUser } from '../../../../../../static/lib/sqlite/service/SqlLibUser'
import { SqlLib } from '../../../../../../static/lib/sqlite/SqlLib'
import { SqlLibBook } from "../../../../../../static/lib/sqlite/service/SqlLibBook";
import userApi from "@/content/api/user";
import store from '@/content/store/index.js'
import { getPointsDetail, exchangeGoods, getExchangeRecordInfo } from '../../../api/point'
import school from '@/content/api/school'
import moment from 'moment'
const cryUtil = require("../../../../../../static/utils/CrypUtil");
import { updateUserMessage } from '../../../utils/event'
import bus from '../../../assets/js/bus'
const detailMessageMap = {
    name: '收件人 ',
    mobile: '手机号 ',
    address: '收货地址',
    postalCode: '邮编  '
}
export default {
    data () {
        const checkMobile = (rule, value, callback) => {
            const reg = /^1[3,4,5,6,7,8,9][0-9]{9}/g
            if (!value) {
                return callback(new Error('请填写手机号'));
            }
            if (value.toString().length > 11 || !reg.test(value)) {
                return callback(new Error('请填写正确的手机号'));
            } else {
                callback()
            }
        }
        return {
            currentexchangeGoods:null,
            userPoint: {
                mobile: '',
                totalPoints: 0,
                exchangedPoints: 0,
            },
            getPointMethod: [
                {
                    icon: require('../../../assets/img/person/sign-in.png'),
                    name: '每日签到',
                    tips: '每日首次签到得积分'
                },
                {
                    icon: require('../../../assets/img/person/use-platform.png'),
                    name: '使用平台备课、授课',
                    tips: '使用平台备授课功能'
                },
                {
                    icon: require('../../../assets/img/person/use-tools.png'),
                    name: '使用平台特色教学工具',
                    tips: '如手机传图、科普识图、思维导图等'
                },
                {
                    icon: require('../../../assets/img/person/use-t-tools.png'),
                    name: '使用课堂活动工具',
                    tips: '如活动计时、随机点名、竞赛问答等'
                },
                {
                    icon: require('../../../assets/img/person/use-time.png'),
                    name: '每日使用时长',
                    tips: '平台每日使用时长'
                },
                {
                    icon: require('../../../assets/img/person/webOpen.png'),
                    name: '使用开放平台',
                    tips: '使用科学教育开放平台'
                },
            ],
            goodsList: [],
            exchangeHis: [],
            detaildMessage: null,
            userMessage: {
                name: '',
                mobile: '',
                address: '',
                postalCode: '',
            },
            rules: {
                name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
                mobile: [
                    { validator: checkMobile, trigger: 'blur' },
                    { required: true, message: '请填写手机号', trigger: 'blur' }
                ],
                address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
                postalCode: [{ required: true, message: '请填写邮编', trigger: 'blur' }, { type: 'number', message: '邮编必须为数字', trigger: 'blur' }],
            },
            tabs: 'explain',
            goodsType: -1,//0:实物,1:授权码
            showDetail: false,
            exchangeGoods: false,
            showGoodsDetail: false,
            pageIndex: 1,
            pageSize: 6,
            total: 0,
            category: '',
            categoryList: null,
            bookList: null,
            checked: [],
            goodsName: '',
            goodsThumb: '',
            showExchangeAgreement: false,
            isReadExchangeAgreement: false,
            showforbidExchange:false,
        }
    },
    mounted () {
        this.getUserPoints()
        this.getUserExchangeHis()
        if (localStorage.getItem('isOffline') === 'true') {
            this.userPoint.totalPoints = '--'
            this.userPoint.exchangedPoints = '--'
            this.$message({
                type: 'error',
                message: '您当前处于离线模式，无法使用积分商城',
                duration: 5000
            })
        }
    },
    methods: {
        goback () {
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let obj = {
                bookId: user.bookId
            }
            if (this.authorzation) {
                if (user.lessonId) {
                    obj.lessonId = user.lessonId
                } else {
                    let book = SqlLibBook.queryChapterLessonByBookId(sqlLib, user.bookId)
                    if (book) {
                        obj.lessonId = book[0].lessonVO[0].id
                    }
                }
            }
            this.$router.push({ name: 'home', params: this.authorzation ? obj : {} })
        },
        formateDate (date) {
            date = new Date(date)
            if (Date.parse(date)) {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
            }
            return ''
        },
        lookMoreGoods(){
            var weburl = ''
            const shell = require('electron').shell;
            if (localStorage.getItem('isOffline') === 'true') {
                weburl = 'https://open.beautyofscienc.cn/jy/index.html#/' 
                shell.openExternal(weburl)
                return
            }
            userApi.getWebAccessToken({
                // appKey:'NOVO_EDU_BEAUTY_SCIENCE_PC'
            }).then(res=>{
                if (res.code === '0') {
                    // return
                    console.log(res.returnValue.accessToken);
                    var baseUrl = process.env.NODE_ENV === 'production' ? 'https://'+res.returnValue.openWebDomain +'/jy/index.html#/person/point/?webToken=' :'https://'+res.returnValue.openWebDomain+'/jy/index.html#/person/point/?webToken='
                    weburl = baseUrl+res.returnValue.accessToken
                    shell.openExternal(weburl)
                }else{
                    weburl = process.env.NODE_ENV === 'production' ? 'https://'+res.returnValue.openWebDomain+'/jy/index.html#/' : 'https://'+res.returnValue.openWebDomain+'/jy/index.html#/'
                    shell.openExternal(weburl)
                }
            })
        },
        async getUserPoints () {
            const sqlib = new SqlLib.getInstance(window.$DBDIR)
            const user = SqlLibUser.queryCurrentUser(sqlib)
            this.userPoint.mobile = user.mobile.replace(/(?<=[0-9]{3})[0-9]{4}(?=[0-9]{4})/g, '****')
            const res = await getPointsDetail()
            if (res.code === '0') {
                this.userPoint.totalPoints = res.returnValue.totalPoints
                this.userPoint.exchangedPoints = res.returnValue.exchangedPoints
            }
            this.goodsList = res.returnValue.exchangeGoodsList
        },
        showAgreement () {
            // this.$client.openExternal('http://exchange-protocol.envisioningchemistry.cn/')
            this.$client.openExternal('https://mp.weixin.qq.com/s/7HBKkz5wwLPvTWMFXQRcyQ')
        },
        confirm () {
            if (this.isReadExchangeAgreement) {
                const sqlib = new SqlLib.getInstance(window.$DBDIR)
                const user = SqlLibUser.queryCurrentUser(sqlib)
                user.reverse3 = 1
                sqlib.updateObjectById(user)
            }
            this.exchangeGoodsStep(this._goods)
            this.showExchangeAgreement = false
        },
        exchangeGoodsHandle (goods) {
            console.log(goods);
            const sqlib = new SqlLib.getInstance(window.$DBDIR)
            const user = SqlLibUser.queryCurrentUser(sqlib)
            var VipType = ''
            VipType = cryUtil.aesDecrypt(user.vipType + "", user.id + "", true);
            // const k1 = "12345678", k2 = "kdjerewd", k3 = "093-1=32", k4 = "abCsd.ed"
            // var newkey =cryUtil.aesEncrypt('xsfsaf12!@#!4324+=+^safsadf', k1 + k2 + k3 + k4)
            // console.log(newkey);
            // return
            VipType = new Buffer(VipType, 'base64').toString('utf8');
            console.log(VipType);
            if (VipType === '0' && goods.isOnlySvip === 0) {
                this.showforbidExchange = true
                return
            }
            this.currentexchangeGoods = goods
            this._goods = null
            if (goods.exchangeNumber <= 0) {
                this.$message.error('物品数量不足，客服补货中。')
                return
            }
            const canUsePoint = this.userPoint.totalPoints - this.userPoint.exchangedPoints
            
            const price = this.getDiscountPrice(goods.totalPrice, goods.discount)
            if (canUsePoint < price) {
                this.$message.error('积分不足')
                return
            }
            this._goods = goods
            if (!user.reverse3 || user.reverse3 === '0') {
                this.showExchangeAgreement = true
            } else {
                this.exchangeGoodsStep(goods)
            }
        },
        exchangeGoodsStep (goods) {
            this.goodsType = goods.isRealObject
            if (this.goodsType === 0) {
                this.getCategory()
            } else {
                this.exchangeGoods = true
            }
        },
        async exchangeCode () {
            // if (this.checked.length <= 0) {
            //     this.$message.error('请选择书本')
            // }
            let param = {
                goodsId: this._goods.id,
                isRealObject: this._goods.isRealObject,
                books: this.checked
            }
            const res = await exchangeGoods(param)
            if (res.code === '0') {
                this.$message.success('兑换成功,已为您延长授权时间')
                this.pageIndex = 1
                this.getUserPoints()
                this.getUserExchangeHis()
                this.cancelExchange()
                let sqlLib = SqlLib.getInstance(window.$DBDIR)
                let bookIds = res.returnValue
                if (bookIds) {
                    bookIds.forEach(item=>{
                        SqlLibBook.updateBookAuthorization(sqlLib, item.id);
                    })
                }
                userApi.getUserInfo().then(res=>{
                    console.log(res);
                    const user = SqlLibUser.queryCurrentUser(SqlLib.getInstance(window.$DBDIR))
                    console.log(user);
                    store.state.becomeVip = res.returnValue.isVip
                    user.vipType = cryUtil.aesEncrypt(
                        res.returnValue.isVip + "",
                        user.id + "",
                        true
                    ); 
                    user.remainderDays = cryUtil.aesEncrypt(
                        res.returnValue.days + "",
                        user.id + "",
                        true
                    );
                    SqlLib.getInstance(window.$DBDIR).updateOrInsertObjectById(user)
                })
                updateUserMessage()
                bus.$emit("refreshHome")
                // const User = SqlLibUser.queryCurrentUser(SqlLib.getInstance(window.$DBDIR))
                // console.log(User);
            } else {
                this.$message.success(res.message)
            }
            
        },
        cancelExchange () {
            this.goodsType = -1
            this.exchangeGoods = false
            this.checked = []
        },
        async getUserExchangeHis () {
            let param = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            }
            let res = await getExchangeRecordInfo(param)
            if (res.code === '0') {
                this.exchangeHis = res.returnValue.records
                this.total = parseInt(res.returnValue.total)
            }
        },
        submitForm () {
            this.$refs.userMessage.validate(async valid => {
                if (valid) {
                    if (!this._goods) return

                    //调用兑换接口
                    let param = {
                        goodsId: this._goods.id,
                        isRealObject: this._goods.isRealObject,
                        deliveryDesc: this.userMessage
                    }
                    const res = await exchangeGoods(param)
                    if (res.code === '0') {
                        this.$message.success('兑换成功，请等待客服发货')
                        this.pageIndex = 1
                        this.getUserPoints()
                        this.getUserExchangeHis()
                        this.goodsType = -1
                        this.exchangeGoods = false
                    } else {
                        this.$message.error('积分兑换失败')
                        this.goodsType = -1
                        this.exchangeGoods = false
                        this.exchangeGoods = false
                    }
                }
            })
        },
        resetForm () {
            this.userMessage = {
                name: '',
                mobile: '',
                address: '',
                postalCode: '',
            }
            this.exchangeGoods = false
        },
        getDiscountPrice (price, discount) {
            return parseInt(price * discount)
        },
        showDetailHandle (detailMessage , isRealObject , goodsName) {
            this.detaildMessage = []
            // console.log(detailMessage)
            if (isRealObject == 0) {
                const message = JSON.parse(detailMessage)
                console.log(message);
                message.forEach(item => {
                    if (!item.bookName || !item.endTime) return
                    this.detaildMessage.push({
                        name:goodsName,
                        bookName: item.bookName,
                        expireDate: this.formateDate(item.endTime)
                    })
                })
            }else{
                const message = JSON.parse(detailMessage)
                const keyArry = ['name', 'mobile', 'postalCode', 'address']
                keyArry.forEach(key => {
                    if (!message[key]) return
                    let obj = {
                        key: detailMessageMap[key],
                        value: message[key],
                        name:goodsName,
                    }
                    this.detaildMessage.push(obj)
                })
            }
            console.log(this.detaildMessage);
            if (this.detaildMessage) {
                this.showDetail = true
            }
            
            // this.detaildMessage = []
            // const message = JSON.parse(detailMessage)
            // if (message) {
            //     message.forEach(item => {
            //         if (!item.bookName || !item.endTime) return
            //         this.detaildMessage.push({
            //             bookName: item.bookName,
            //             expireDate: item.endTime
            //         })
            //     })
            // } else {
            //     const keyArry = ['name', 'mobile', 'postalCode', 'address']
            //     keyArry.forEach(key => {
            //         if (!message[key]) return
            //         let obj = {
            //             key: detailMessageMap[key],
            //             value: message[key]
            //         }
            //         this.detaildMessage.push(obj)
            //     })
            // }
            // if (this.detaildMessage.length > 0) {
            //     this.showDetail = true
            // }
        },
        setHeaderStyle () {
            return { background: '#F5F9FE', color: '#303133' }
        },
        showGoodsDetailHandle (goods) {
            if (goods.isRealObject === 1) return
            this.goodsName = goods.name
            this.goodsThumb = goods.thumb
            this.authDays = goods.extraDesc && JSON.parse(goods.extraDesc).AuthDays
            this.showGoodsDetail = true
        },
        currentChange (val) {
            this.pageIndex = val
            this.getUserExchangeHis()
        },
        getCategory () {
            let sqlLib = SqlLib.getInstance(window.$DBDIR);
            let user = SqlLibUser.queryCurrentUser(sqlLib);
            school.getAllPublisher().then(publishers => {
                if (publishers.code == "0") {
                    let currentPub = publishers.returnValue;
                    this.categoryList = [];
                    console.log(currentPub)
                    currentPub.forEach(publisher => {
                        if (user.eduLevelId == publisher.eduLevelId) {
                            this.categoryList.push({
                                id: publisher.id,
                                name: publisher.name
                            });
                        }
                    })
                    this.active = this.active + 1;
                    this.bookList = [];
                    if (this.categoryList.length > 0) {
                        this.category = this.categoryList[0].id;
                        this.selectPublish();
                    }
                }
                this.exchangeGoods = true
            }).catch(error => {
                this.message.error("网络异常！");
            });
        },
        selectPublish () {
            this.categoryList.some(item => {
                if (item.id === this.category) {
                    this._publishName = item.name
                    return true
                }
                return false
            })
            const param = {
                publisherId: this.category
            }
            school.getBooksByPublisherId(param).then(books => {
                let currentBooks = books.returnValue;
                this.bookList = [];
                currentBooks.forEach(book => {
                    let curChecked = false;
                    if (this.checked.length > 0) {
                        this.checked.forEach(temp => {
                            if (temp.bookId === book.id) {
                                curChecked = true;
                            }
                        })
                    }
                    this.bookList.push({
                        id: book.id,
                        name: book.name,
                        thumb: book.thumb,
                        checked: curChecked
                    })
                })
            })
        },
        check (index) {
            if (this.bookList[index].checked) {
                this.bookList[index].checked = false
                let currentIndex = -1;
                this.checked.forEach((temp, curIndex) => {
                    if (temp.bookId === this.bookList[index].id) {
                        currentIndex = curIndex;
                    }
                });
                if (currentIndex !== -1) {
                    this.checked.splice(currentIndex, 1);
                }
            } else {
                if (this.checked.length < 3) {
                    this.$set(this.bookList[index], 'checked', true);
                    // this.checked.push([this.bookList[index].id, this.category]);
                    this.checked.push({ bookId: this.bookList[index].id, bookName: this._publishName + '-' + this.bookList[index].name });
                }
            }
        },
    }
}
</script>

<style lang="scss" scope>
.point-market {
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    position: relative;
    .back {
        cursor: pointer;
        width: 88px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0085FF;
        color: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #D7D7D7;
        img{
            width: 8px;
            height: 11px;
            margin-right: 6px;
        }
    }
    .agreement-mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 99999;
    }
    .forbid-button{
        border: 1px solid #4894ff;
        width: 76px;
        height: 36px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        color: #fff;
        background-color: #4894ff;
    }
    .agreement-container {
        background-color: #fff;
        padding: 15px;
        border-radius: 8px;
        width: 400px;
        font-size: 14px;
        position: relative;
      
        .hyperlink {
            color: #4894ff;
            text-decoration: underline;
            font-style: oblique;
        }
        .ag-close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
        }
        .ag-content {
            text-indent: 2em;
            margin: 15px;
            line-height: 30px;
        }
        .handel {
            margin-top: 15px;
            margin-bottom: 15px;
            button {
                width: 60px;
                height: 36px;
                font-size: 14px;
                cursor: pointer;
            }
            button:nth-child(1) {
                color: #fff;
                background-color: #4894ff;
                margin-right: 14px;
            }
            button:nth-child(2) {
                color: #606266;
                background-color: #fff;
                border: 1px solid rgba(222, 222, 231, 1);
            }
        }
    }
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .content-tips {
        font-size: 16px;
        color: #000000;
    }
    .item-title {
        color: #303133;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .user-message {
        height:120px;
        background: linear-gradient(270deg, #EFF7FF 0%, #E4F2FF 100%);
        border-radius: 4px;
        margin-bottom: 30px;
        .message-content {
            flex: 1;
        }
        .content-detail {
            color: #000000;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 20px;
        }
        .divider {
            display: inline-block;
            width: 0px;
            height: 40px;
            border: 0.5px solid #eaebed;
        }
    }
    .get-point {
        display: flex;
        justify-content: space-between;
    }
    .get-method {
        flex: 1;
        .method-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
                margin-right: 0 !important;
            }
        }
        .method-name {
            width: 100%;
            text-align: center;
            margin-top: 10px;
            white-space: nowrap;
            color: #000000;
        }
        .method-tips {
            font-size: 12px;
            color: #909399;
            text-align: center;
            width: 90%;
            margin-top: 13px;
        }
    }
    .point-tabs {
        margin: 20px 0;
        .tabs-item {
            padding-bottom: 5px;
            font-size: 14px;
            color: #606266;
            border-bottom: 2px transparent solid;
            cursor: pointer;
            &:nth-child(1) {
                margin-right: 35px;
            }
        }
        .active {
            color: #4994ff;
            border-bottom: 4px solid;
            border-image: linear-gradient(
                    to right,
                    #fff 0%,
                    #fff 20%,
                    #4994ff 20%,
                    #4994ff 80%,
                    #fff 80%,
                    #fff 100%
                )
                5 5;
        }
    }
    .goods-list {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 15px));
        grid-gap: 20px;
        height: 280px;
        overflow: auto;

        .goods-item {
            height: 119px;
            border: 1px solid #D7D7D7;
            background: #FFFFFF;         
            border-radius: 4px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            position: relative;
        }
        .goods-temp {
            width: 120px;
            height: 90px;
            border-radius: 4px;
            margin-right: 20px;
        }
        .goods-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 3px;
        }
        .newx-cost {
            font-size: 18px;
            color: #F7B500;;
            display: inline-block;
            margin-right: 5px;
        }
        .old-cost {
            color: #606266;
            font-size: 14px;
            display: inline-block;
            text-decoration: line-through;
        }
        .original-cost{
            display: none;
        }
        .goods-num {
            margin-top: 5px;
            color: #606266;
            font-size: 14px;
        }
        .explain-handle {
            width: 88px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid #0085FF;
            color: #0085FF;
            background-color: #fff;
            line-height: 32px;
            text-align: center;
            outline: none;
            cursor: pointer;
            position: absolute;
            right: 19px;
            top: 19px;
        }
    }
    .dialog-container {
        position: fixed;
        flex-direction: column;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .goods-detail {
        min-width: 400px;
        border-radius: 8px;
        overflow: hidden;
        .header-title {
            width: 100%;
            height: 40px;
            background: #f4f4f4;
            position: relative;
            .close-dialog {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
            }
        }
        .dialog-conetent {
            min-height: 200px;
            display:flex;
            align-items:center;
            justify-content: center;
            background-color: #fff;
            padding: 20px 30px;
        }
    }
    .code-detail {
        display: inline-block;
        width: 50%;
        text-align: center;
        flex: 1;
    }
    .goods-thumb {
        width: 100%;
        .close-dialog {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
        .thumb-container {
            width: 340px;
            height: 196px;
            background-image: url(../../../assets/img/person/thumb-bg.png);
            background-size: 150% 150%;
            background-position: center center;
            img {
                width: 124px;
                height: 84px;
                margin-bottom: 21px;
            }
        }
    }
    .goods-intro-container {
        width: 100%;
        padding: 0 30px;
        padding-bottom: 30px;
        .goods-intro {
            background: #f4f4f4;
            border-radius: 8px;
            padding: 25px 30px;
            p {
                color: #606266;
                line-height: 20px;
                font-size: 12px;
            }
            .g-d-title {
                color: #303133;
                margin-top: 20px;
                margin-bottom: 10px;
                .left-handle {
                    display: inline-block;
                    width: 4px;
                    height: 12px;
                    background: #4994ff;
                    transform: translateX(-6px);
                }
            }
        }
    }
    .exchange-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    // .textbook {
    //     padding: 0 40px;
    //     .new-user-tips {
    //         color: rgba(95, 97, 101, 1);
    //         line-height: 40px;
    //         margin: 10px 0;
    //     }
    // }
    .book {
        height: 300px;
        display: grid;
        grid-template-columns: repeat(6, 92px);
        grid-template-rows: repeat(6, 130px);
        grid-gap: 26px 26px;
    }
    .book-item {
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
        .book-message {
            position: absolute;
            bottom: -1px;
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 12px;
        }
        .checked {
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0;
            img {
                width: 34px;
                height: 34px;
                position: absolute;
                top: 130px;
                right: 0;
                transform: translate(50%, -50%);
            }
        }
    }
    .el-textarea__inner {
        background: #eff4f8;
        border: 1px solid #eff4f8;
        font-size: 14px;
        font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
        color: rgb(47, 49, 51);
        &::-webkit-input-placeholder {
            font-size: 16px;
            color: #909399;
            line-height: 40px;
            font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
        }
    }
    .el-form-item.is-error .el-textarea__inner {
        background: #fff1f1;
        color: #f76b6c;
        border: none;
    }
    .error {
        .el-textarea__inner {
            background-color: #fff1f1;
            border: #fff1f1;
            color: #f86c6c;

            &::-webkit-input-placeholder {
                font-size: 17px;
                line-height: 40px;
                color: #f86c6c;
            }
        }
    }
}
@media screen and (max-width: 1437px) {
    .point-market {
        padding: 15px;
        font-size: 12px;
        overflow: auto;
        .content-tips {
            font-size: 12px;
        }
        .item-title {
            margin-bottom: 8px;
            font-size: 14px;
        }
        .user-message {
            height: 60px;
            margin-bottom: 10px;
            .content-detail {
                margin-bottom: 5px;
                font-size: 14px;
            }
        }
        .get-method {
            .method-icon {
                width: 60px;
                height: 60px;
                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }
        .goods-list {
            grid-gap: 10px;
            height: 220px;
            .goods-item {
                height: 100px;
                padding: 10px;
            }
            .goods-temp {
                width: 100px;
                height: 70px;
            }
        }
    }
}
</style>